<!DOCTYPE html>
<html ng-app="demoApp">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>下拉选择 - ng-components-ui</title>
    <link rel="stylesheet" href="../dist/ng-components.css" />
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
        margin: 0;
        padding: 0;
        background: #f5f5f5;
      }

      .header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 30px 40px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }

      .header h1 {
        margin: 0 0 10px 0;
        font-size: 32px;
      }

      .header p {
        margin: 0;
        opacity: 0.9;
        font-size: 16px;
      }

      .back-link {
        display: inline-block;
        margin-top: 15px;
        color: white;
        text-decoration: none;
        padding: 8px 16px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 4px;
        transition: background 0.2s;
      }

      .back-link:hover {
        background: rgba(255, 255, 255, 0.3);
      }

      .container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 40px;
      }

      .demo-section {
        background: white;
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        margin-bottom: 30px;
      }

      .demo-section h2 {
        margin: 0 0 20px 0;
        color: #333;
        font-size: 20px;
        border-bottom: 2px solid #667eea;
        padding-bottom: 10px;
      }

      .demo-section h3 {
        margin: 20px 0 15px 0;
        color: #555;
        font-size: 16px;
        font-weight: 600;
      }

      .demo-section p {
        color: #666;
        line-height: 1.6;
        margin: 0 0 15px 0;
      }

      .demo-row {
        margin: 20px 0;
        display: flex;
        align-items: center;
        gap: 20px;
      }

      .demo-row label {
        min-width: 120px;
        color: #555;
        font-weight: 500;
      }

      .demo-row ng-select {
        flex: 1;
        max-width: 400px;
      }

      .code-block {
        background: #f7fafc;
        border: 1px solid #e2e8f0;
        border-radius: 4px;
        padding: 15px;
        margin: 10px 0;
        font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
        font-size: 12px;
        overflow-x: auto;
      }

      .code-block code {
        color: #2d3748;
      }

      .feature-list {
        background: #f7fafc;
        border-left: 4px solid #667eea;
        padding: 15px 20px;
        margin: 20px 0;
      }

      .feature-list ul {
        margin: 0;
        padding-left: 20px;
      }

      .feature-list li {
        color: #4a5568;
        margin: 8px 0;
        line-height: 1.6;
      }

      .selected-value {
        margin-top: 10px;
        padding: 10px;
        background: #e6f3ff;
        border-radius: 4px;
        color: #0066cc;
        font-size: 13px;
      }
    </style>
  </head>
  <body ng-controller="DemoController">
    <div class="header">
      <h1>下拉选择组件</h1>
      <p>功能强大的下拉选择组件，支持搜索、多选、远程数据</p>
      <a href="home.html" class="back-link">← 返回主页</a>
    </div>

    <div class="container">
      <div class="demo-section">
        <h2>下拉选择组件 (ng-select)</h2>

        <div class="feature-list">
          <strong>功能特性:</strong>
          <ul>
            <li>支持单选和多选模式</li>
            <li>本地搜索和远程搜索</li>
            <li>自定义字段映射（value/label）</li>
            <li>支持清空和禁用状态</li>
            <li>搜索关键词高亮显示</li>
            <li>远程搜索防抖优化</li>
          </ul>
        </div>

        <h3>1. 基本单选</h3>
        <p>最基本的下拉选择用法</p>
        <div class="demo-row">
          <label>选择水果：</label>
          <ng-select
            options="fruits"
            ng-model="selectedFruit"
            placeholder="请选择水果"
            value-field="id"
            label-field="name"
          ></ng-select>
        </div>
        <div class="selected-value" ng-if="selectedFruit">
          选中值：{{selectedFruit}}
        </div>

        <div class="code-block">
          <code>
&lt;ng-select<br>
&nbsp;&nbsp;options="fruits"<br>
&nbsp;&nbsp;ng-model="selectedFruit"<br>
&nbsp;&nbsp;placeholder="请选择水果"<br>
&nbsp;&nbsp;value-field="id"<br>
&nbsp;&nbsp;label-field="name"&gt;<br>
&lt;/ng-select&gt;
          </code>
        </div>

        <h3>2. 多选模式</h3>
        <p>通过 <code>multiple="true"</code> 开启多选</p>
        <div class="demo-row">
          <label>选择颜色：</label>
          <ng-select
            options="colors"
            ng-model="selectedColors"
            placeholder="请选择颜色（多选）"
            value-field="id"
            label-field="name"
            multiple="true"
          ></ng-select>
        </div>
        <div class="selected-value" ng-if="selectedColors && selectedColors.length">
          选中值：{{selectedColors.join(', ')}}
        </div>

        <div class="code-block">
          <code>
&lt;ng-select<br>
&nbsp;&nbsp;options="colors"<br>
&nbsp;&nbsp;ng-model="selectedColors"<br>
&nbsp;&nbsp;multiple="true"&gt;<br>
&lt;/ng-select&gt;
          </code>
        </div>

        <h3>3. 可搜索</h3>
        <p>通过 <code>searchable="true"</code> 开启搜索功能</p>
        <div class="demo-row">
          <label>选择城市：</label>
          <ng-select
            options="cities"
            ng-model="selectedCity"
            placeholder="搜索城市"
            value-field="id"
            label-field="name"
            searchable="true"
            search-placeholder="输入城市名称搜索..."
          ></ng-select>
        </div>
        <div class="selected-value" ng-if="selectedCity">
          选中值：{{selectedCity}}
        </div>

        <div class="code-block">
          <code>
&lt;ng-select<br>
&nbsp;&nbsp;options="cities"<br>
&nbsp;&nbsp;ng-model="selectedCity"<br>
&nbsp;&nbsp;searchable="true"<br>
&nbsp;&nbsp;search-placeholder="输入城市名称搜索..."&gt;<br>
&lt;/ng-select&gt;
          </code>
        </div>

        <h3>4. 禁用状态</h3>
        <div class="demo-row">
          <label>禁用选择：</label>
          <ng-select
            options="fruits"
            ng-model="disabledValue"
            placeholder="已禁用"
            value-field="id"
            label-field="name"
            disabled="true"
          ></ng-select>
        </div>

        <h3>5. 不可清空</h3>
        <div class="demo-row">
          <label>不可清空：</label>
          <ng-select
            options="fruits"
            ng-model="noClearValue"
            placeholder="不显示清空按钮"
            value-field="id"
            label-field="name"
            clearable="false"
          ></ng-select>
        </div>

        <h3>6. 远程搜索</h3>
        <p>通过 <code>remote-search</code> 实现远程数据加载</p>
        <div class="demo-row">
          <label>远程搜索：</label>
          <ng-select
            ng-model="remoteValue"
            placeholder="输入关键词搜索用户..."
            value-field="id"
            label-field="name"
            searchable="true"
            remote-search="remoteSearch(keyword)"
            search-placeholder="输入用户名搜索..."
          ></ng-select>
        </div>
        <div class="selected-value" ng-if="remoteValue">
          选中值：{{remoteValue}}
        </div>

        <div class="code-block">
          <code>
// Controller<br>
$scope.remoteSearch = function(keyword) {<br>
&nbsp;&nbsp;// 模拟远程搜索<br>
&nbsp;&nbsp;return $timeout(function() {<br>
&nbsp;&nbsp;&nbsp;&nbsp;return users.filter(function(user) {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return user.name.indexOf(keyword) !== -1;<br>
&nbsp;&nbsp;&nbsp;&nbsp;});<br>
&nbsp;&nbsp;}, 500);<br>
};<br>
<br>
// HTML<br>
&lt;ng-select<br>
&nbsp;&nbsp;ng-model="remoteValue"<br>
&nbsp;&nbsp;searchable="true"<br>
&nbsp;&nbsp;remote-search="remoteSearch(keyword)"&gt;<br>
&lt;/ng-select&gt;
          </code>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/angular@1.8.3/angular.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/angular-strap@2.3.12/dist/angular-strap.min.js"></script>
    <script src="../dist/ng-components.js"></script>
    <script>
      angular
        .module("demoApp", ["ngComponents"])
        .controller("DemoController", function ($scope, $timeout) {
          // 水果数据
          $scope.fruits = [
            { id: 1, name: "苹果" },
            { id: 2, name: "香蕉" },
            { id: 3, name: "橙子" },
            { id: 4, name: "葡萄" },
            { id: 5, name: "西瓜" },
            { id: 6, name: "草莓" }
          ];

          // 颜色数据
          $scope.colors = [
            { id: "red", name: "红色" },
            { id: "blue", name: "蓝色" },
            { id: "green", name: "绿色" },
            { id: "yellow", name: "黄色" },
            { id: "purple", name: "紫色" },
            { id: "orange", name: "橙色" }
          ];

          // 城市数据
          $scope.cities = [
            { id: "bj", name: "北京" },
            { id: "sh", name: "上海" },
            { id: "gz", name: "广州" },
            { id: "sz", name: "深圳" },
            { id: "hz", name: "杭州" },
            { id: "nj", name: "南京" },
            { id: "cd", name: "成都" },
            { id: "wh", name: "武汉" },
            { id: "xm", name: "厦门" },
            { id: "qd", name: "青岛" }
          ];

          // 初始值
          $scope.selectedFruit = null;
          $scope.selectedColors = [];
          $scope.selectedCity = null;
          $scope.disabledValue = 1;
          $scope.noClearValue = null;
          $scope.remoteValue = null;

          // 远程搜索模拟数据
          var users = [
            { id: 1, name: "张三" },
            { id: 2, name: "李四" },
            { id: 3, name: "王五" },
            { id: 4, name: "赵六" },
            { id: 5, name: "孙七" },
            { id: 6, name: "周八" },
            { id: 7, name: "吴九" },
            { id: 8, name: "郑十" }
          ];

          // 远程搜索函数
          $scope.remoteSearch = function (keyword) {
            console.log("搜索关键词:", keyword);

            // 模拟网络延迟
            return $timeout(function () {
              if (!keyword) {
                return users;
              }

              return users.filter(function (user) {
                return user.name.indexOf(keyword) !== -1;
              });
            }, 500);
          };
        });
    </script>
  </body>
</html>
